import React, { useCallback, useState } from 'react';
import { Common } from 'UtilsCommon';
import { Link } from 'Configs';
import Base from './base';

const getLinkUrl = (property, value) => {
  if (!property.host || !value || value.toLowerCase().indexOf('http') === 0) return value;
  return property.host + value;
};

const replaceWrap = (v) => {
  if (!v) return v;
  v = v.replace(/\n/g, "<br/>");
  v = v.replace(/\r/g, "<br/>");

  return v;
};

export default (props) => {
  const { property, view, pageAxis } = Base.getProps(props);
  const [isVisible, setIsVisible] = useState(property.isVisible !== false);
  const [value, setValue] = useState(Base.getInitValue(property, 'text'));
  const [label, setLabel] = useState(property.label);
  const [, setRefreshId] = useState(null);

  property.setIsVisible = (v) => { property.isVisible = v; setIsVisible(v); };
  property.setValue = (v) => setValue(v);
  property.getValue = () => value;
  property.setLabel = (l) => setLabel(l);
  property.setLoading = (v) => { property.loading = v; };
  property.refresh = () => setRefreshId(Common.createGuid());

  const clickAction = useCallback(() => {
    if (property.loading) return;
    if (property.eventActionName) pageAxis.invokeEventAction(property.eventActionName, { property, view, pageAxis });
    else if (property.eventAction) pageAxis.invokeEventAction2(property.eventAction, { property, view, pageAxis });
  }, [property, view, pageAxis]);

  if (!isVisible || (Common.isNullOrEmpty(value) && property.isValueVisible)) return null;

  const { width, height, alignItems, isDiv, isDivClick, spanId, labelStyle, eventActionName, isArrayString, eventAction, cssAnimation, justifyContent, isButton } = property;
  let className = property.className || '';

  const style = property.style ? { ...property.style } : {};

  if (!style.display) style.display = "flex";
  if (width) style.width = width;
  if (height) style.height = height;
  if (alignItems) style.alignItems = alignItems;
  if (justifyContent) style.justifyContent = justifyContent;

  let onClick;
  if (eventActionName || eventAction) onClick = clickAction;

  const spanStyle = Common.getStyle(property.spanStyle ? { ...property.spanStyle } : {});

  if (cssAnimation && cssAnimation.invokeContent) {
    const as = JSON.parse(cssAnimation.invokeContent);
    for (const key in as) spanStyle[key] = as[key];
  }
  const spanClassName = [];
  if (property.spanClassName) spanClassName.push(property.spanClassName);
  if (isButton) {
    if (isDivClick) className += " buttonActive";
    else spanClassName.push("buttonActive");
  }

  const dangerouslySetInnerHTML = property.isHtml ? { __html: property.isWrap ? replaceWrap(value) : value } : undefined;
  let value2 = property.isHtml ? undefined : value;
  if (property.isDate && value2) value2 = value2.substring(0, 10);
  else if (property.isCurrency && value2) value2 = Common.toCurrency(value2);

  let values;
  if (isArrayString && value2) {
    value2 = value2.replace(/，/g, ",");
    values = value2.split(',').map(m => Common.trim(m));
  }

  const linkUrl = property.isLinkValue ? getLinkUrl(property, value) : property.linkUrl;

  if (linkUrl) {
    if (linkUrl.toLowerCase().indexOf('http') >= 0 || linkUrl.toLowerCase().indexOf('tel:') >= 0) {
      if (isDiv) {
        return <div className={className} style={style}>
          {label && <label style={Base.setStyle(labelStyle)}>{label}</label>}
          <a className={spanClassName.join(' ')} href={linkUrl} style={spanStyle} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>{value2}</a>
        </div>;
      } else return <a className={spanClassName.join(' ')} href={linkUrl} style={spanStyle} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>{label || value2}</a>;
    }
    else {
      if (isDiv) {
        return <div className={className} style={style}>
          {label && <label style={Base.setStyle(labelStyle)}>{label}</label>}
          <Link className={spanClassName.join(' ')} to={linkUrl} style={spanStyle} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>{value2}</Link>
        </div>;
      }
      else return <Link className={spanClassName.join(' ')} to={linkUrl} style={spanStyle} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>{label || value2}</Link>;
    }
  }

  if (isDiv) {
    if (isArrayString) {
      return <div className={className} style={style} onClick={isDivClick ? onClick : null}>
        {values.map((m, i) => <span className={spanClassName.join(' ')} onClick={isDivClick ? null : onClick} style={spanStyle} key={i}>{m}</span>)}
      </div>;
    }
    else if (value && value.length > 0 && value.map) {
      return <div className={className} style={style} onClick={onClick}>
        {value.map((m, i) => <span className={spanClassName.join(' ')} style={spanStyle} key={i}>{m}</span>)}
      </div>;
    }

    return <div className={className} style={style} onClick={isDivClick ? onClick : null}>
      {label && <label style={Base.setStyle(labelStyle)}>{label}</label>}
      <span className={spanClassName.join(' ')} onClick={isDivClick ? null : onClick} id={spanId} style={spanStyle} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>{value2}</span>
    </div>;
  }

  return <span className={spanClassName.join(' ')} id={spanId} onClick={onClick} style={spanStyle} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>{value2}</span>;
};